@charset "UTF-8";

$theme: #FF8900;
$theme_sub: #FF9966; 
$bgc_main:#fafafa;
$bgc_sub:white;
$bgc_lignt: #fefefe;
$bgc_hover:#eee;
$bdc_main: #aaa;
$bdc_sub: #ddd;
$bdc_light: #eee;
$fc_main: #333;
$fc_sub: #888;
$fc_disabled: #bbb;
$fc_tip: #bbb;
$fc_light: #eee;
$fc_inverse: white;
$fc_icon: #666;
$font_family: 'Microsoft YaHei';
$fs_main: 16px;
$fs_sub: 13px;
$h1fs: 24px;
$hfs_decrease: 3px;

$primary:#1989fa; 
$secondary:#ff4081;
$success: #67c23a;
$info: #606266;
$fail: #f56c6c;
$warning: #e6a23c;

:export {
	theme: $theme;
    theme_sub: $theme_sub;
    bgc_main: $bgc_main;
    bgc_sub: $bgc_sub;
    bgc_lignt: $bgc_lignt;
    bgc_hover: $bgc_hover;
    bdc_main: $bdc_main;
    bdc_main: $bdc_sub;
    bdc_light: $bdc_light;
    fc_main: $fc_main;
    fc_sub: $fc_sub;
    fc_tip: $fc_tip;
    fc_light: $fc_light;
    fc_disabled: $fc_disabled;
    fc_inverse: $fc_inverse;
    fc_icon: $fc_icon;
    fc_icon: $font_family;
    fs_main: $fs_main;
    fs_sub: $fs_sub;

    primary: $primary; 
    secondary: $secondary;
    success: $success;
    info: $info;
    fail: $fail;
    warning: $warning;
}

/* 页面设计稿宽度 */
$design_width: 800px;
/* 页面设计稿dpr基准值 */
$design_dpr: 2;
/* 将页面分为10块 */
$blocks: 10;
/* 缩放所支持的设备最小宽度 */
$min_device_width: 265px;
/* 缩放所支持的设备最大宽度 */
$max_device_width: 800px;

/*
    rem与px对应关系，1rem代表html font-size值（为一块的宽度），$rem即为$px对应占多少块

        $px                    $rem
    -------------    ===    ------------
    $design_width              $blocks
*/

/* 设置容器拉伸的最小宽度 */
@mixin container-min-width() {
    margin-right: auto;
    margin-left: auto;
    min-width: $min_device_width;
}

/* 设置容器拉伸的最大宽度 */
@mixin container-max-width() {
    margin-right: auto;
    margin-left: auto;
    max-width: $max_device_width;
}

/* html根元素的font-size定义，简单地将页面分为$blocks块，方便计算 */
@mixin root-font-size() {
    /* 使得在一定区段内跟随屏幕大小变化 */
    @at-root html {
        font-size: 100vw / $blocks;
        /* 配合js代码控制可以做到所有分辨率下与设计稿同大小, 这里记录基本配置使得js可读到作运算 */
        content: '{"design":"#{$design_width}","min":"#{$min_device_width}","max":"#{$max_device_width}"}';
    }

    /* 超过该区段最大值后固定值 */
    @media screen and (max-width: $min_device_width) {
        @at-root html {
            font-size: $min_device_width / $blocks;
        }
    }

    /* 最小宽度定义 */
    @at-root body {
        @include container-min-width();
    }

    /* 最大宽度定义 */
    &[data-content-max] {
        @at-root body {
            @include container-max-width();
        }
        @media screen and (min-width: $max_device_width) {
            @at-root html {
                font-size: $max_device_width / $blocks;
            }
        }
    }
}

//定位上下左右居中
@mixin center {  
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
//定位上下居中
@mixin center-ver {  
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
}
//定位左右居中
@mixin center-hor {  
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
}
// 背景图片地址和大小
@mixin bg-img($url) { 
	background-image: url($url);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/**
 * 实现固定宽高比
 * @param  {string} $position: relative      定位方式
 * @param  {string} $width:    100%          容器宽度
 * @param  {string} $subNodeSelector:      null          容器的目标子元素
 * @param  {number} $aspectX:  1             容器宽
 * @param  {number} $aspectY:  1             容器高
 */
@mixin aspect-ratio(
    $position: relative,
    $width: 100%,
    $subNodeSelector: null,
    $aspectX: 1,
    $aspectY: 1
) {
    overflow: hidden;
    position: $position;
    padding-top: percentage($aspectY / $aspectX);
    width: $width;
    height: 0;

    @if $subNodeSelector == null {
        $subNodeSelector: "*";
    }

    & > #{$subNodeSelector} {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

/* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
@mixin font-size($fontSize) {
    font-size: $fontSize / $design_dpr;

    [data-dpr="2"] & {
        font-size: $fontSize / $design_dpr * 2;
    }

    [data-dpr="3"] & {
        font-size: $fontSize / $design_dpr * 3;
    }
}

/**
 * 边框圆角，支持单个值与多个值，在高清设备下px圆角加倍
 * @param  {number|list} $radius 圆角值
 * @param  {number}      $ratio  设备像素比
 */
@mixin border-radius($radius: 0, $ratio: 1) {
    $border-radius-corner: (top-left, top-right, bottom-right, bottom-left);

    /* 列表 按照四个角的顺序匹配 */
    @if (type-of($radius) == list) {
        @for $i from 1 through length($radius) {
            $item: nth($radius, $i);
            $corner: nth($border-radius-corner, $i);

            /* 普通设备，或者为百分比则直接使用圆角值 */
            @if $ratio == 1 or isPercentage($item) {
                border-#{$corner}-radius: $item;
            }
            /* 否则翻$ratio倍 */
            @else {
                border-#{$corner}-radius: $item * $ratio;
            }
        }
    }
    /* 单个值 */
    @else {
        @if $ratio == 1 or isPercentage($radius) {
            border-radius: $radius;
        } @else {
            border-radius: $radius * $ratio;
        }
    }
}

/**
 * 元素边框
 * @param  {string|list} $direction: all           为all或列表时表示多个方向的边框，否则为单个边框
 * @param  {string|list} $size:      1px           边框尺寸，为列表时表将按照direction的顺序取值
 * @param  {string|list} $style:     solid         边框样式，高清设备下仅支持solid，同上
 * @param  {string|list} $color:     #ddd          边框颜色，同上
 * @param  {string}      $position:  relative      元素定位方式，一般为relative即可
 * @param  {string}      $radius:    0             边框圆角
 */
@mixin border(
    $direction: all,
    $size: 1px,
    $style: solid,
    $color: $bdc_sub,
    $position: relative,
    $radius: 0
) {
    /* 多个边框 */
    @if $direction == all or type-of($direction) == list {
        /* 普通设备 */
        @media not screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-radius($radius);

            @if $direction == all {
                border: $size $style $color;
            }
            @else {
                @for $i from 1 through length($direction) {
                    $item: nth($direction, $i);

                    border-#{$item}: getBorderItemValue($size, $i) getBorderItemValue($style, $i) getBorderItemValue($color, $i);
                }
            }
        }

        /* 高清设备 */
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-multiple(
                $direction: $direction,
                $size: $size,
                $color: $color,
                $position: $position,
                $radius: $radius
            );
        }
    }

    /* 单个边框 */
    @else {
        /* 普通设备 */
        @media not screen and (-webkit-min-device-pixel-ratio: 2) {
            border-#{$direction}: $size $style $color;
        }

        /* 高清设备 */
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            @include border-single(
                $direction: $direction,
                $size: $size,
                $color: $color,
                $position: $position
            );
        }
    }
}

/* 实现1物理像素的单条边框线 */
@mixin border-single(
    $direction: bottom,
    $size: 1px,
    $color: $bdc_sub,
    $position: relative
) {
    position: $position;

    &:after {
        content: "";
        position: absolute;
        #{$direction}: 0;

        pointer-events: none;
        background-color: $color;

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
        }

        /* 上下 */
        @if ($direction == top or $direction == bottom) {
            left: 0;
            width: 100%;
            height: $size;

            @media only screen and (-webkit-device-pixel-ratio: 2) {
                -webkit-transform: scaleY(.5);
                        transform: scaleY(.5);
            }

            @media only screen and (-webkit-device-pixel-ratio: 3) {
                -webkit-transform: scaleY(.333333333333);
                        transform: scaleY(.333333333333);
            }
        }

        /* 左右 */
        @else if ($direction == left or $direction == right) {
            top: 0;
            width: $size;
            height: 100%;

            @media only screen and (-webkit-device-pixel-ratio: 2) {
                -webkit-transform: scaleX(.5);
                        transform: scaleX(.5);
            }

            @media only screen and (-webkit-device-pixel-ratio: 3) {
                -webkit-transform: scaleX(.333333333333);
                        transform: scaleX(.333333333333);
            }
        }
    }
}

/* 实现1物理像素的多条边框线 */
@mixin border-multiple(
    $direction: all,
    $size: 1px,
    $color: $bdc_sub,
    $position: relative,
    $radius: 0
) {
    position: $position;

    @include border-radius($radius);

    &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        box-sizing: border-box;
        -webkit-transform-origin: top left;
                transform-origin: top left;

        @media only screen and (-webkit-device-pixel-ratio: 2) {
            width: 200%;
            height: 200%;

            @include border-radius($radius, 2);

            -webkit-transform: scale(.5, .5);
                    transform: scale(.5, .5);
        }

        @media only screen and (-webkit-device-pixel-ratio: 3) {
            width: 300%;
            height: 300%;

            @include border-radius($radius, 3);

            -webkit-transform: scale(.333333333333, .333333333333);
                    transform: scale(.333333333333, .333333333333);
        }

        @if $direction == all {
            border: $size solid $color;
        }
        @else {
            @for $i from 1 through length($direction) {
                $item: nth($direction, $i);

                border-#{$item}: getBorderItemValue($size, $i) solid getBorderItemValue($color, $i);
            }
        }
    }
}

/* 提取数字 */
@function numberOf($value: 1px, $unit: 1px) {
    @if(unitless($value)) {
        @return $value;
    }
    @return $value / $unit;
}

/* 单位px转化为rem */
@function px2rem($px) {
    @return (numberOf($px) / numberOf($design_width) * $blocks) + rem;
}

/* 单位rem转化为px，可用于根据rem单位快速计算原px */
@function rem2px($rem) {
    @return (numberOf($rem, 1rem) * $blocks * numberOf($design_width)) + px;
}

/**
 * 获取边框某项对应的值
 * @example getBorderItemValue(10px, 2)
 * @param  {string|list}    $item  某一项或多个项的列表
 * @param  {number}         $index 下标
 * @return {string}                 项值
 */
 @function getBorderItemValue($item, $index) {
    @if (type-of($item) == list) {
        @if ($index > length($item)) {
            $index: 1;
        }
        @return nth($item, $index);
    }
    @else {
        @return $item;
    }
}

/**
 * 判断是否为百分比
 * @param  {number} $value  值
 * @return {boolean}        是否为百分比
 */
@function isPercentage($value) {
    @return type-of($value) == number and unit($value) == '%';
}